<template>
	<view style="width: 100%;height: auto;background: white;min-height: 100vh;" v-if="Object.keys(allInfo).length != 0">
		<!-- 		<view id="home" style="margin-top: 24rpx;margin-left: 30rpx;float: left;margin-bottom: 18rpx;"
			class="home acea-row row-center-wrapper iconfont icon-xiangzuo h5_back" @tap="returns">
		</view> -->
		<video class="videostyle" :src="allInfo.vcr.img_url" lazy-load @loadedmetadata="loadedmetadata"
			v-if="allInfo.vcr != null" :style="{'height':750*allInfo.vcr.height/allInfo.vcr.width/2 + 'px'}"
			:poster="allInfo.vcr.img_url + '?vframe/jpg/offset/00/w200/h300'" playsinline webkit-playsinline
			:show-fullscreen-btn="false" :enable-progress-gesture="false" object-fit="cover" controls></video>
		<view style="">
			<view style="width: 100%;height: 60rpx;display: flex;align-items: center;padding-left: 20rpx;">
				<image :src="dangan" style="width: 40rpx;" mode="widthFix"></image>
				<view>
					学员档案
				</view>
			</view>
			<view
				style="border-radius: 16rpx;margin: 20rpx;width: calc(100% - 40rpx);background: rgb(252, 246, 237);height: 200rpx;display: flex;">
				<image :src="allInfo.userInfo.avatar" style="margin: 20rpx;height: 160rpx;border-radius: 16rpx;"
					mode="heightFix"></image>
				<view style="display: grid;align-items: center;margin: 20rpx;">
					<view>昵称：{{allInfo.userInfo.name}}</view>
					<view>班级：{{allInfo.userInfo.class}}</view>
					<view>城市：{{allInfo.userInfo.city}}</view>
					<view>班主任：{{allInfo.userInfo.teacher}}</view>
				</view>
			</view>
		</view>
		<view style="">
			<view>
				<view style="width: 100%;height: 60rpx;display: flex;align-items: center;padding-left: 20rpx;">
					<image :src="zuopin" style="width: 40rpx;" mode="widthFix"></image>
					<view>
						学员作品
					</view>
				</view>
				<view style="margin: 0 20rpx;width: calc(100% - 40rpx);">
					<pp-waterfall-flow :value="allInfo.myProduct" :gap="20" :columns="columns" :itemBR="12"
						imageBR="10rpx" v-on:clickItem="toWorksDetailItem"
						v-on:clickImage="toWorksDetailImage"></pp-waterfall-flow>
				</view>
			</view>
		</view>
		<view style="">
			<view>
				<view style="width: 100%;height: 90rpx;display: flex;align-items: center;justify-content: center;">
					<!-- <image :src="zuopin" style="width: 40rpx;" mode="widthFix"></image> -->
					<view>
						更多其他学员作品
					</view>
				</view>
				<view style="margin: 0 20rpx;width: calc(100% - 40rpx);">
					<pp-waterfall-flow :value="otherProduct" :gap="20" :columns="columns" :itemBR="12" imageBR="10rpx"
						v-on:clickItem="toWorksDetailItem" v-on:clickImage="toWorksDetailImage"></pp-waterfall-flow>
					<view class="mores-txt flex" v-if="hasMore == false">
						<text style="font-size: 26rpx;">已经全部加载完毕</text>
					</view>
				</view>
			</view>
		</view>
		<view class="des_detail" v-if="isBlackApp() && studentid != '-1'">
			<open-app :shareUrl="shareUrl"></open-app>
		</view>
	</view>
</template>
<script>
	const app = getApp();
	const comUrl = "https://pic.mae.vip/%E4%BA%BA%E5%83%8F%E5%AE%9E%E6%88%98%E7%8F%AD%E7%B4%A0%E6%9D%90/";
	//import openApp from './components/openApp.vue';
	import ppWaterfallFlow from './components/pp-waterfall-flow/pp-waterfall-flow.vue';
	import openApp from './components/openApp.vue';
	import {
		openStudentInfo
	} from '@/api/case.js';

	import {
		addClickRecord,
	} from '@/api/home.js';
	import {
		loginMobile,
	} from "@/api/user";
	import {
		mapGetters
	} from "vuex";
	import animationType from '@/utils/animationType.js'
	import {
		ref
	} from 'process';

	export default {
		components: {
			ppWaterfallFlow,
			openApp
		},
		data() {
			return {
				shareUrl: 'https://www.mayimae.com/qz/pages/usercase/userinfo?userId=-1&token=-1&studentid=',
				columns: 2,
				dangan: '../../static/images/usercase/dangan.png',
				zuopin: '../../static/images/usercase/zuopin.png',
				userId: '-1',
				token: '-1',
				platform: uni.getSystemInfoSync().platform, //手机类型
				allVideoId: [],
				page: 1,
				limit: 10,
				listData: [],
				hasMore: true,
				studentid: '-1',
				allInfo: {},
				otherProduct: [],
			}
		},
		created() {
			let that = this;
		},
		mounted: function() {
			let that = this;

		},
		onPageScroll(res) { //、、、、、
			let that = this;
		},
		onReachBottom() {
			let that = this;
			console.log('456bottom');
			if (that.hasMore == true) {
				that.page++;
				that.getData();
			}
		},
		onLoad(options) {
			let that = this;
			that.token = options.token;
			that.userId = options.userId;
			that.studentid = options.studentid;
			that.shareUrl = that.shareUrl + that.studentid; //、、、、、、、、、、
			that.getData();

			// 通过检查window.android和window.webkit属性来判断是否是移动端
			if (window.webkit) {
				if (that.platform == 'ios') {
					window.webkit.messageHandlers.goShare.postMessage({
						'page': '39',
						'shareurl': that.shareUrl
					});
				}
			}
			if (that.platform == 'android') {
				if (!that.isBlackApp()) {
					window.location.href = 'goShare&page=' + '39' + '&shareurl=' + that.shareUrl;
				}
			}
		},
		beforeDestroy() {
			uni.$off('pageScroll'); // 避免内存泄漏
		},
		methods: {
			getData() {
				let that = this;
				let p = {};
				p.userId = that.userId;
				p.token = that.token;
				p.studentId = that.studentid;
				p.page = that.page;
				p.limit = that.limit;
				openStudentInfo(p).then(res => {
					if (res.code == 0) {
						that.allInfo = res.data;

						let arr = res.data.otherProduct;
						if (arr.length < that.limit) {
							that.hasMore = false;
						}
						that.$nextTick(() => {
							if (that.page == 1) {
								that.otherProduct = [];
							}
							arr.forEach((item, index) => {
								that.otherProduct.push(item)
							});
						})

					}
				})
			},
			returns() {
				console.log('----!!!  ')
				uni.navigateBack();
			},
			isBlackApp() {
				var u = navigator.userAgent.toLowerCase();
				return /micromessenger/i.test(u) || u.indexOf("weibo") > -1 || u.indexOf("qq") > -1 || u.indexOf(
					'mqqbrowser') > -1;
			},
			toWorksDetailItem: function(item) {
				//console.log('----!!!  ' + JSON.stringify(item))
				let that = this;
				uni.navigateTo({
					animationType: animationType.type,
					animationDuration: animationType.duration,
					url: '/pages/usercase/workdetail?userId=' + that.userId + '&token=' + that.token +
						'&workId=' + item.id,
				})
			},
			toWorksDetailImage: function(item) {
				//console.log('----###  ' + JSON.stringify(item))
				let that = this;
				uni.navigateTo({
					animationType: animationType.type,
					animationDuration: animationType.duration,
					url: '/pages/usercase/workdetail?userId=' + that.userId + '&token=' + that.token +
						'&workId=' + item.id,
				})
			},
			loadedmetadata(e) {
				let that = this;
				// 获取所有视频的 id
				//console.log(e.target.id)
				if (that.allVideoId.indexOf(e.target.id) == -1) {
					that.allVideoId.push(e.target.id);
				}
				const video = document.querySelector('video');
				if (video) {

					//video.setAttribute('webkit-playsinline', 'true');
					//video.setAttribute('playsinline', 'true');
				}
			},
			playVideo(id, url, poster) {
				let that = this;

				for (let i = 0; i < that.allVideoId.length; i++) {
					if (that.allVideoId[i] != id) {
						uni.createVideoContext(that.allVideoId[i].toString()).pause(); // 暂停其他视频
					} else {
						console.log(id)
						if (that.platform == 'ios') {
							uni.createVideoContext(that.allVideoId[i].toString()).play(); // 内联播放

						} else {
							uni.createVideoContext(that.allVideoId[i].toString()).play(); // 内联播放
						}
					}
				}
			},
			jqueryUrl(url) {
				let arr = url.split('?');
				let params = arr[1].split('&');
				let obj = {};
				for (let i = 0; i < params.length; i++) {
					let param = params[i].split('=');
					obj[param[0]] = param[1];
				}
				return obj;
			},
		}
	}
</script>

<style lang="scss" scoped>
	page,
	body {
		height: 100%;
		width: 100%;
		background: white !important;
	}

	.des_detail {
		/* 必须设置position: relative;不然会位置飘出父层 */
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1001;
		width: 100%;
		height: 100vh;
		//background: rgb(95, 157, 228);
		background: transparent;
	}

	.mores-txt {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
		height: 70rpx;
		color: #999;
		font-size: 24rpx;

		.iconfont {
			margin-top: 2rpx;
			font-size: 24rpx;
		}
	}

	.userview {
		height: 130rpx;
		width: 100%;
		background: #fff;
		border-bottom-left-radius: 16rpx;
		border-bottom-right-radius: 16rpx;
		margin-top: -10rpx;
		display: grid;

		.username {
			display: flex;
			align-items: center;
			align-items: center;
			justify-content: space-between;
			margin: 20rpx;
			width: calc(100% - 40rpx);
			color: #333333;
		}

		image {
			width: 20rpx;
			height: 20rpx;
		}

		.location {
			font-size: 20rpx;
			display: flex;
			align-items: center;
			color: #666666;
		}

		.banji {
			padding-left: 20rpx;
		}
	}

	.videostyle {
		width: 100%;
		border-radius: 16rpx;
		height: 200rpx;
		margin: 20rpx;
		width: calc(100% - 40rpx);
	}

	.singleShow {
		margin: 10rpx;
		width: calc(100% - 20rpx);
		background: rgb(252, 246, 237);
		border-radius: 10rpx;
		height: auto;
		padding-bottom: 20rpx;

		.titleView {
			display: flex;
			align-items: center;
			align-items: center;
			justify-content: space-between;
			margin: 20rpx;
			width: calc(100% - 40rpx);
			padding-top: 20rpx;
		}

		.subtitle {
			font-size: 30rpx;
			font-weight: 600;
		}

		.lookall {
			font-size: 24rpx;
			line-height: 24rpx;
			display: flex;
			align-items: center;
			color: #ea5550;
		}

		image {
			width: 30rpx;
			height: 30rpx;
		}

		.imgstyle {
			width: calc(100% - 20rpx);
			margin: 0rpx 10rpx;
		}
	}



	.image {
		width: 25px;
		height: 25px;
	}

	.text {
		font-size: 14px;
		margin-top: 5px;
	}


	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.bottom {
		height: 100%;
		height: 100rpx;
		background: #f5f5f5;
		display: flex;
		justify-content: center;

		button {
			background: #fff;
			width: 200rpx;
			height: 60rpx;
			border-radius: 30rpx;
			font-size: 24rpx;
			line-height: 60rpx;
			margin-top: 20rpx;
		}
	}
</style>